// 选择商品

<template>
  <view>
    <mes-search
      placeholder="关键词"
      v-model="postForm.keyword"
      @search="resetPaging(), getData()"
    ></mes-search>
    <!-- 商品 -->
    <mes-tip v-if="noData"></mes-tip>
    <view class="goods">
      <radio-group @change="radioGroupChange">
        <label
          class="item"
          :for="item.id"
          v-for="(item, index) in goods"
          :key="item.id"
        >
          <view class="left">
            <image
              mode="aspectFill"
              :src="$filters.filterImg(item.goods_image)"
            />
            <view class="item-info">
              <text class="item-title text-over-1">
                {{ item.goods_name }}
              </text>
              <text class="item-code">编号：{{ item.goods_code }}</text>
              <text class="item-stock">
                库存：{{ item.stock }}{{ item.unit_name }}
              </text>
            </view>
          </view>
          <view
            class="right"
            :class="pageType === 'bom_list' ? 'self-center' : 'self-end'"
          >
            <!-- 单选 -->
            <template v-if="pageType === 'bom_list'">
              <radio
                :id="item.id"
                color="#1a96ff"
                style="transform: scale(0.9)"
                :value="item.goods_code"
                :checked="item.goods_code == radioGoodsCode"
              ></radio>
            </template>
            <!-- 多选 -->
            <template v-else>
              <template v-if="Number(item.number) || item.focus">
                <view class="sub" @tap="numberSub(index)">
                  <view></view>
                </view>
                <input
                  type="digit"
                  v-model="item.number"
                  @input="getNumber"
                  @focus="item.focus = true"
                  @blur="numberBlur(index)"
                />
              </template>
              <view class="t-icon t-icon-a-" @tap="numberAdd(index)"></view>
            </template>
          </view>
        </label>
      </radio-group>
    </view>
    <mes-button
      v-if="!noData"
      type="cart"
      :number="number"
      @confirm="confirm"
    ></mes-button>
  </view>
</template>

<script>
export default {

  data() {
    return {
      radioGoodsCode: '',
      pageType: '',
      noData: false,
      hasMore: true,
      number: 0,
      goods: [],
      postForm: {
        keyword: '',
        // 类别
        goods_type_id: '',
        page: 1,
        // 状态:0=下架,1=上架
        status: 1,
        // 查询商品来源（默认查询当前商品列表，为'showGoodsList'时查询进销存商品）
        goods_type: '',
        // 商品类型（1：原材料，2：成品）
        goods_types: 1
      }
    }
  },
  onLoad(options) {
    this.pageType = options.type
    if (
      // BOM 清单、生产计划、验收单添加商品：成品
      // 其它都是原材料
      this.pageType === 'bom_list' ||
      this.pageType === 'prod_plan' ||
      this.pageType === 'receipt'
    ) {
      this.postForm.goods_types = 2
      this.pageType === 'bom_list'
        ? (this.radioGoodsCode = getApp().globalData.goods.goods_code)
        : ''
    }

    this.getData()
  },
  onReachBottom() {
    if (!this.hasMore) return
    this.postForm.page++
    this.getData()
  },
  methods: {
    // 获取数据
    async getData() {
      const res = await this.$api.prod.common.getGoodsList(this.postForm)
      if (res.code == 200) {
        res.data.list.map((item) => {
          item.number = 0
          item.focus = false
        })
        this.goods = [...this.goods, ...res.data.list]
        this.hasMore = res.data.list.length
        this.noData = !this.goods.length
      }
    },
    // 重置分页
    resetPaging() {
      this.hasMore = true
      this.postForm.page = 1
      this.goods = []
    },
    // 数量减
    numberSub(index) {
      this.goods[index].number = this.$digit.numberDigit(
        this.goods[index].number - 1
      )
      this.getNumber()
    },
    // 数量加
    numberAdd(index) {
      this.goods[index].number = this.$digit.numberDigit(
        Number(this.goods[index].number) + 1
      )
      this.getNumber()
    },
    // 数量失去焦点
    numberBlur(index) {
      this.goods[index].focus = false

      if (!this.goods[index].number) {
        this.goods[index].number = this.$digit.numberDigit(1)
      } else {
        this.goods[index].number = this.$digit.numberDigit(
          this.goods[index].number
        )
      }

      this.getNumber()
    },
    // 获取总数量
    getNumber() {
      this.number = 0
      this.goods.forEach((item) => {
        this.number += Number(item.number)
      })
      this.number = this.$digit.numberDigit(this.number)
    },
    // 单选框改变
    radioGroupChange(e) {
      this.radioGoodsCode = e.detail.value
    },
    // 生产工序
    process(filterRes) {
      let list = []
      list = filterRes.map((item) => {
        return {
          id: item.id,
          // 商品编号
          goods_code: item.goods_code,
          // 商品备注
          goods_note: item.note,
          // 商品单位ID
          goods_unit: item.goods_unit,
          // 数量
          number: item.number,
          // 基本单位ID
          default_unit: item.unit_id,
          // 基本数量
          basic_nmber: item.basic_nmber,
          // 商品单价
          purchase: item.purchase,
          // 金额
          money: item.number * item.purchase,
          // 展示：
          unit_name: item.unit_name,
          default_unit_name: item.default_unit_name,
          goods_name: item.goods_name,
          goods_image: item.goods_image
        }
      })

      getApp().globalData.goods.list = [
        ...getApp().globalData.goods.list,
        ...list
      ]
    },
    // 生产计划、生产单
    prod_plan(filterRes) {
      let list = []
      list = filterRes.map((item) => {
        return {
          id: item.id,
          // 编辑商品用到的（提交参数）
          // 商品编号（商品详情获取或者通用->商品价格接口获取）
          goods_code: item.goods_code,
          //  商品规格型号
          goods_note: item.goods_note,
          //  商品单位ID（资料->商品获取商品单位列表，用户选择）
          goods_unit: item.goods_unit,
          //  数量（默认为1，用户修改）
          number: item.number,
          //  基本单位ID（商品详情获取或者通用->商品价格接口获取）
          default_unit: item.unit_id,
          //  基本数量（默认为1，多单位时需要换算，或者通过通用->价格变动接口格式化）
          basic_nmber: item.basic_nmber,
          //  商品单价（通用->商品价格获取）
          purchase: item.purchase,
          //  金额
          money: item.number * item.purchase,
          // 编辑商品用到的（展示参数）
          default_unit_name: item.default_unit_name, //基本单位名称
          // goods_name: item.goods_name //商品名称
          // unit_name: item.unit_name, //商品单位

          // mes-goods显示中用到的
          unit_name: item.unit_name, //数量单位
          goods_image: item.goods_image, //图片
          goods_name: item.goods_name, //商品名称
          // goods_code: item.goods_code //商品编号
          // purchase: item.purchase, //单价
          // number: item.number //数量
          // 序列号
          serial_status: item.serial,
          serial:[],
          batch:item.batch,//是否开启批次
          period: [],
          // 获取序列号用到的参数 stores_id：仓库id attribute_id：商品属性id goods_code：商品编号 store_status：商品是否在库
          // goods_code:'',
          goods_attr: item.attribute_id,
          stores_id: item.manager_warehouse_id,
          store_status: 1, //在库状态:1=在库,2=出库 领料查在库，退料查出库
          batch_id: '', //批次ID
          batch_name: '', //批次名称
          manufacture: '', //批次生产日期
          guarantee: item.shelf_life, //批次保质期
          validity: '' //批次有效期至

          // 序列号
          // serial_status: item.serial, //是否开启序列号
          // period: [], //序列号数组
          // goods_code: '', //商品编号
          // stores_id: '', //仓库ID
          // goods_attr: '', //商品属性
          // store_status: 1 //在库状态:1=在库,2=出库 领料查在库，退料查出库
        }
      })
      list.forEach((item) => {
        if (item.serial_status) {
        } else if (item.batch) {
        }
      })
      getApp().globalData.goods.list = [
        ...getApp().globalData.goods.list,
        ...list
      ]
    },
    // 验收单
    receipt(filterRes) {
      let list = []
      list = filterRes.map((item) => {
        return {
          id: item.id,
          // 商品编号
          goods_code: item.goods_code,
          // 商品备注
          goods_note: item.note,
          // 商品属性ID
          goods_attr: item.goods_attr,
          auxiliary: item.auxiliary, //属性状态
          // 商品单位ID
          goods_unit: item.goods_unit,
          // 仓库ID
          stores_id: item.manager_warehouse_id,
          // 生产数量
          need_number: '',
          // 验收数量
          number: item.number,
          // 基本单位ID
          default_unit: item.unit_id,
          // 基本数量
          basic_nmber: item.basic_nmber,
          // 商品单价
          unit_price: item.purchase,
          // 购货金额
          all_money: item.number * item.purchase,
          serial_status: item.serial,//开启序列号
          batch:item.batch,//是否开启批次
          // 备注
          remark: '',
          // 批次ID
          batch_id: '',
          // 批次名称
          batch_name: '',
          // 生产日期
          manufacture: '',
          // 保质期
          guarantee: '',
          // 有效期至
          validity: '',
          // 序列号数组
          serial: [],
          period: [],
          // 单位数组
          unit_options: item.unit_options,
          // 展示：
          attr_name: item.attr_name,
          unit_name: item.unit_name,
          default_unit_name: item.default_unit_name,
          goods_name: item.goods_name,
          goods_image: item.goods_image
        }
      })
      list.forEach((item) => {
        if (item.serial_status) {
        } else if (item.batch) {
        }
      })
      getApp().globalData.goods.list = [
        ...getApp().globalData.goods.list,
        ...list
      ]
    },
    // 领料单、委外加工单、退料单
    requisition(filterRes) {
      let list = []
      list = filterRes.map((item) => {
        return {
          id: item.id,
          // 商品编号
          goods_code: item.goods_code,
          // 商品备注
          goods_note: item.note,
          // 商品属性ID
          goods_attr: item.goods_attr,
          auxiliary_data: item.auxiliary_data,//属性数组
          auxiliary:item.auxiliary,//属性状态
          // 商品单位ID
          goods_unit: item.goods_unit,
          // 仓库ID
          stores_id: item.manager_warehouse_id,
          // 可用库存
          allow_stock: item.stock,
          // 数量
          number: item.number,
          // 基本单位ID
          default_unit: item.unit_id,
          // 基本数量
          basic_nmber: item.basic_nmber,
          // 商品单价
          unit_price: item.purchase,
          // 购货金额
          all_money: item.number * item.purchase,
          // 序列号
          serial_status:item.serial,//开启序列号
          batch: item.batch,//是否开启批次
          // 备注
          remark: '',
          // 批次ID
          batch_id: '',
          // 批次名称
          batch_name: '',
          // 生产日期
          manufacture: '',
          // 保质期
          guarantee: '',
          // 有效期至
          validity: '',
          // 序列号数组
          serial: [],
          period: [],
          // 单位数组
          unit_options: item.unit_options,
          // 展示：
          attr_name: item.attr_name,
          unit_name: item.unit_name,
          default_unit_name: item.default_unit_name,
          goods_name: item.goods_name,
          goods_image: item.goods_image,
        }
      })
      //新加的
      list.forEach((item) => {
        if (item.serial_status) {
        } else if (item.batch) {
        }
      })

      getApp().globalData.goods.list = [
        ...getApp().globalData.goods.list,
        ...list
      ]
    },
    // 确定
    async confirm() {
      // 单选商品
      if (this.pageType === 'bom_list') {
        if (!this.radioGoodsCode) {
          return uni.showToast({
            title: '请选择商品',
            icon: 'none'
          })
        } else {
          const findRes = this.goods.find(
            (item) => item.goods_code == this.radioGoodsCode
          )
          getApp().globalData.goods = findRes
          return uni.navigateBack({ delta: 1 })
        }
      }

      if (!Number(this.number)) {
        return uni.showToast({
          title: '请选择商品',
          icon: 'none'
        })
      }

      const filterRes = this.goods.filter((item) => item.number)

      switch (this.pageType) {
        case 'process': // 生产工序
          this.process(filterRes)
          break
        case 'prod_plan': // 生产计划
        case 'productions': // 生产单
          this.prod_plan(filterRes)
          break
        case 'receipt': // 验收单
          this.receipt(filterRes)
          break
        case 'requisition': // 领料单
        case 'outsource': // 委外加工单
        case 'materials': // 退料单
          this.requisition(filterRes)
          break
      }
      uni.navigateBack({ delta: 1 })
    }
  }
}
</script>

<style>
page {
  padding: 92rpx 0 300rpx;
}
</style>
<style lang="less" scoped>
.goods {
  width: 702rpx;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16rpx;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 654rpx;
    margin: 0 auto;
    padding: 24rpx 0;
    border-bottom: 1px solid #eee;
    &:last-child {
      border-bottom: none;
    }
    .left {
      display: flex;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
      }
      .item-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 300rpx;
        margin: 0 20rpx;
        .item-title {
          font-weight: 500;
          color: #111111;
        }
        .item-code,
        .item-stock {
          font-size: 24rpx;
          color: #666666;
        }
      }
    }
    .right {
      display: flex;
      .sub {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50rpx;
        height: 50rpx;
        background: #ffffff;
        border-radius: 12rpx;
        border: 2rpx solid #259eff;
        view {
          width: 16rpx;
          height: 3rpx;
          background: #111111;
          border-radius: 2rpx;
        }
      }
      input {
        flex: 1;
        margin: 0 20rpx;
        font-weight: 500;
        color: #111111;
        text-align: center;
      }
      .t-icon {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}
</style>

